<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .wrap {
            display: flex;
        }
        .wrap > section {
            height: 500px;
            width: 300px;
            margin:0px 10px;
            border: 3px solid #ccc;
            background-color: rgb(235, 240, 240);
        }
        .wrap > section p {
            font-size: 15px;
            width: auto;
            height: 35px;
            line-height: 35px;
            padding-left: 20px;
            background-color: #fff;
        }
        .wrap > section:nth-of-type(1) p{
            color:  #ccc;
        }
        .wrap > section:nth-of-type(2) p{
            color:  green;
        }
        .wrap > section:nth-of-type(1) hr{
            border-top: 15px solid #ccc;
        }
        .wrap > section:nth-of-type(2) hr{
            border-top: 15px solid green;
        }
        .nav li {
            position: absolute;
            width: 290px;
            list-style: none;
            height: 40px;
            margin: 5px;
            font-size: 16px;
            font-weight: bold;
            background-color: #fff;
            text-align: center;
            line-height: 40px;
        }
        section ul {
            position: relative;
        }
        input {
            margin: 10px;
        }
        button{
            border: 1px solid rgb(214, 93, 12);
            background-color:rgb(214, 93, 12);
            color:#fff ;
            border-radius: 6px;
            width: 42px;
            height: 22px;
            font-size: 14px;
            font-weight: normal;
        }
        .finish li {
            width: 290px;
            list-style: none;
            height: 40px;
            margin: 5px;
            font-size: 16px;
            font-weight: bold;
            background-color: #fff;
            text-align: center;
            line-height: 40px;
            color:  green;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <section class="todo">
            <hr>
            <p>代办的</p>
            <ul class="nav">
            </ul>
        </section>
        <section class="complete">
            <hr>
            <p>进行中</p>
            <ul class="finish">
            </ul>
        </section>
    </div>
    <input type="text"><button>添加</button>
    <script>
        var data = [
            {
                task:"任务一"
            },{
                task:"任务二"
            },{
                task:"任务三"
            }
        ];
        var finishData = [] ;
        function finishRender(){
            var ulEle = document.querySelector(".finish");
            ulEle.innerHTML = '' ;
            finishData.forEach(function(item,key){
                var li = document.createElement("li");
                li.className = `li${ key + 1 }` ;
                li.style.top = `${ key * 45 }px` ;
                li.innerHTML = `${item.task}` ;
                ulEle.appendChild(li);
            });
        }

        finishRender();
        
        function renderDom(){
            var ulEle = document.querySelector(".nav");
            
            ulEle.innerHTML = '' ;
            data.forEach(function(item,key){
                var li = document.createElement("li");
                li.className = `li${ key + 1 }` ;
                li.style.top = `${ key * 45 }px` ;
                li.innerHTML = `${item.task}` ;
                ulEle.appendChild(li);
            });
            addEle();
            dragTask();
        }
        renderDom();
        function addEle(){
            var inputEle = document.querySelector("input");
            var btnEle = document.querySelector("button");
            btnEle.onclick = function (){
                var obj = {} ;
                var workInfo = inputEle.value; 
                obj.task = workInfo ; 
                data.push(obj);
                renderDom();
                inputEle.value = '' ;
            }
        }
        
        function dragTask () {
            var liEles = document.querySelectorAll(".nav li");
            var completeEle = document.querySelector(".complete");
            liEles.forEach(function(liEle,key){
                liEle.onmousedown = function ( event ){

                    var objX = {
                        left:liEle.offsetLeft,
                        top:liEle.offsetTop
                    } ; 

                    console.log(liEle.offsetLeft,liEle.offsetTop);

                    liEle.style.zIndex = 10 ;

                    var e = event || window.event ;

                    var mouseStartX = e.clientX ; 
                    var mouseStartY = e.clientY ;

                    var x = mouseStartX - liEle.offsetLeft ;
                    var y = mouseStartY - liEle.offsetTop ; 

                    document.onmousemove = function (event) {

                        var e = event || window.event ;

                        var mouseEndX = e.clientX ;
                        var mouseEndY = e.clientY ;

                        var xx = mouseEndX - x ; 
                        var yy = mouseEndY - y ;
                        
                        liEle.style.left = `${xx}px` ; 
                        liEle.style.top = `${yy}px` ; 
                        
                    }
                    liEle.onmouseup = function ( event ){
                        liEle.style.zIndex = 0;
                        var e = event || window.event ;

                        var mouseEndX = e.clientX ;
                        var mouseEndY = e.clientY ;

                        var xx = mouseEndX - x ; 
                        var yy = mouseEndY - y ;

                        var secX = completeEle.offsetLeft ;
                        var secY = completeEle.offsetTop ;

                        console.log(xx+parseInt(liEle.offsetWidth));
                        if ( ( xx+parseInt(liEle.offsetWidth) > ( secX - 16 ) ) 
                        && ( xx+parseInt(liEle.offsetWidth) )  < ( secX + completeEle.offsetWidth ) ) {
                            var obj = {} ;

                            obj.task = data[key].task ;

                            finishData.push( obj );
                            finishRender();

                            data.splice(key,1);
                            renderDom();

                        } else {
                            renderDom();
                        }
                        document.onmousemove = '' ;
                    }
                }
            });
        }
    </script>
</body>
</html>